<template>
  <div class="pet-container" ref="floatButton" :style="buttonStyle">
    <p class="pet-msg" @click="ToChat">{{ text }}</p>
    <img ref="petRef" class="pet" @mousedown="startDrag" @mouseup="stopDrag" @mousemove="dragMove" :src="pet.src"
      alt="">
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import imgSrc from '@/assets/机器人.gif'; // 导入静态图片路径
import { useRouter } from 'vue-router';
const text = ref('我在,点这问我')
const router = useRouter();
function ToChat() {
  if (router.currentRoute.value.path !== '/Main/Chat') {
    router.replace('/Main/Chat')
  }
  if (router.currentRoute.value.path === '/Main/Chat') {
    text.value = '我在呢'
    setTimeout(function () {
      text.value = '快发送你想问的问题吧';
    }, 1000);
    setTimeout(function () {
      text.value = '啦啦啦~';
    }, 5000);
  }
}
const petRef = ref(null);
const floatButton = ref(null);
const pet = reactive({
  src: imgSrc,
});

const petPosition = reactive({
  x: 0,
  y: 0,
});

const buttonStyle = reactive({
  top: 'calc(80% - 100px)',
  left: '20px',
});

let isDragging = false;
let updatePositionDebounced = null;

function startDrag(event) {
  event.preventDefault();
  isDragging = true;
  window.addEventListener('mousemove', dragMove);
}

function stopDrag() {
  isDragging = false;
  window.removeEventListener('mousemove', dragMove);
}

function dragMove(event) {
  if (isDragging) {
    petPosition.x = event.clientX - petRef.value.offsetWidth / 2;
    petPosition.y = event.clientY - petRef.value.offsetHeight / 2;

    if (floatButton.value) {
      floatButton.value.style.left = `${petPosition.x}px`;
      floatButton.value.style.top = `${petPosition.y}px`;
    }
  }
}

// 简单的防抖函数
function debounce(func, delay) {
  let timeoutId;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}
</script>


<style scoped lang="scss">
.pet-container {
  position: absolute;

  .pet {
    position: absolute;
    width: 100px;
    height: 105px;
    cursor: pointer;
  }

  .pet-msg {
    cursor: pointer;
    padding: 5px;
    color: #b4b4b4;
    font-size: 20px;
  }
}
</style>